<template>
<div class="steps-view">
  <h1>4. 请参考下图样式，使⽤Vue 编写⼀个步骤条表单组件，并尽可能实现如下
要求</h1>
<p class="title-content">1. 可以⾃定义表单⾼亮颜⾊
2. 使⽤时可以⾃定义所有步骤的名称
3. 使⽤时可以⾃定义每⼀步骤对应的表单内容
4. 可以重置当前表单内容
5. 点击提交按钮后展示表单填写结果</p>
</div>

<div class="box-one">自定义表单高亮颜色
  <color-picker v-model:pureColor="pureColor" format="hex6" shape="circle" useType="both"
v-model:gradientColor="gradientColor" @pureColorChange="pureColorChange"/>
自定义表单步骤：
<a-input-group compact>
      <a-select v-model:value="formSelectNameValue" @change="handleChange">
        <a-select-option v-for="item in listArray" :value="item.itemKey">{{item.selectName}}</a-select-option>
      </a-select>
      <a-col :span="8">
      表单步骤名称：<a-input v-model:value="valueInput1" style="width: 50%" />
      </a-col>
      <a-col :span="8">
        表单名称：<a-input v-model:value="valueInput2" style="width: 50%" />
      </a-col>
      <a-button @click="confirmStepsName">确认</a-button>
    </a-input-group>
</div>

<div class="all-steps">
  <div class="steps-item" >
    <button class="button-class" v-for="item,index in listArray" @click="clickButton(index,item)" :style="{background: active === index ? backGroundButton:'',color:active === index ? '#81cbad':''}" >
    <div class="button-inner">
      <div class="icon-round" :style="{background: index ===active ? '#fff':''}">
        <span>{{(index+1)}}</span>
    </div>
    <div :style="{color: active === index ? '#fff':''}">
        {{item.name}}
       </div> 
      </div>
      
    </button>
  </div>
  <!-- 下面的部分 -->
  <div class="bottom-inner" v-for="item,index in listArray">
    <div class="bottom"  v-show="(index===active)">
      <a-form
    name="indexBottom"
    :model="formState"
    @finish="handleFinish"
    ref="formRef"
  >
    <a-form-item
      :label="item.itemName"
      :name="item.itemKey"
    >
      <a-input v-model:value="formState[item.itemKey]" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      <Transition>
      <a-button style="margin-left: 10px" v-if="(index!==0)" @click="clickPrev(index)">上一步</a-button>
    </Transition>
    <Transition>
      <a-button style="margin-left: 10px" v-if="(listArray.length-1!==index)" @click="clickNext(index)">下一步</a-button>
    </Transition>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
  </div>   
  </div>
  
 
  <!-- <router-view></router-view> -->
</div>

</template>

<script lang="js">
import { 
  defineComponent, 
  getCurrentInstance, 
  reactive, 
  ref 
} from 'vue';
import {ColorPicker} from "vue3-colorpicker";
import { useRoute, useRouter } from 'vue-router';


export default defineComponent({
  name: '',
  // 注册你的组件
  components:{ ColorPicker },
  props: {

  },
  
  emits: [
  ],
  setup(props, {attrs, slots, emit, expose }){
  const route = useRoute();
  const router = useRouter();
  const colorValue = ref('')
  const pureColor = ref('')
  const gradientColor = ref('')
  const active =  ref(0)
  const backGroundButton =  ref('#81cbad')
  const itemName = ref('用户名')
  const formSelectNameValue = ref('步骤1')
  const valueInput1 =  ref('')
  const valueInput2 =  ref('')
  const changeStepsNameIndex = ref('')
  const listArray = ref([
    {
      name:'请输入姓名',
      itemName: '用户名',
      itemKey:'name',
      selectName: '步骤1',
      id:0,
    },
    {
      name:'请填写手机号',
      itemName: '手机号',
      itemKey:'phone',
      selectName: '步骤2',
      id:1,
    },
    {
      name:'请填写密码',
      itemName: '密码',
      itemKey:'password',
      selectName: '步骤3',
      id:2,
    }
])
const formRef=ref()
const flagRefresh = ref(true)
const formState =reactive({name:'',phone: '',password:''})
const pureColorChange=(res)=>{
  backGroundButton.value =  res
}
const handleFinish = (values) => {
  // 提交的表单内容
      console.log(values, formState);
    };
const clickPrev=(index)=>{
  if(index !==0){
    active.value = index-1
    itemName.value = listArray.value[active.value].itemName
  }
}
const clickNext =(index)=>{
  if(index !==listArray.length){
    active.value = index+1
    itemName.value = listArray.value[active.value].itemName
  }
}
const clickButton = (index,item)=>{
  active.value = index
  itemName.value = item.itemName
}
const resetForm = ()=>{
  for(let item in formState) {
    formState[item] =''
  }
}
const handleChange = (value)=>{
  console.log(value)
  changeStepsNameIndex.value = listArray.value.findIndex(item => 
    // console.log(item.itemKey)
    item.itemKey === value
  )
}
const confirmStepsName =(value)=>{
  if(formSelectNameValue.value === '步骤1'&& valueInput1.value) {
    active.value = 0
    listArray.value[0].name = valueInput1.value
  }
  if(formSelectNameValue.value === '步骤1'&& valueInput2.value) {
    active.value = 0
    listArray.value[0].itemName = valueInput2.value
  }
  // 这里再做个非空判断
  if(valueInput1.value.trim() && changeStepsNameIndex.value && changeStepsNameIndex.value !==-1) {
    active.value = changeStepsNameIndex.value
    listArray.value[changeStepsNameIndex.value].name = valueInput1.value
  }
  if(valueInput2.value.trim() && changeStepsNameIndex.value && changeStepsNameIndex.value !==-1) {
    active.value = changeStepsNameIndex.value
    listArray.value[changeStepsNameIndex.value].itemName = valueInput2.value
  }
}


    return {
      valueInput2,
      confirmStepsName,
      changeStepsNameIndex,
      valueInput1,
      handleChange,
      formSelectNameValue,
      handleFinish,
      clickNext,
      clickPrev,
      formRef,
      resetForm,
      itemName,
      backGroundButton,
      formState,
      clickButton,
      active,
      pureColorChange,
      colorValue,
      gradientColor,
      pureColor,
      listArray,
      emit,     // 触发事件 (方法，等同于 emit)
      expose,   // 暴露公共 property (函数)
    }
  },
  

  methods:{
  
  }
});
</script>

<style lang="less" scoped>
.title-content {
  margin-bottom: 30px;
}
.icon-round{
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background-color: antiquewhite;
}
.steps-item{
  display: flex;
  margin-bottom: 40px;
}
.button-class{
  display: flex;
  // align-items: center;
  // margin: 0 20px;
  border: none;
  height: 50px;
  line-height: 50px;
  background-color: #f2f4f8;
}
.button-inner{
  width: 200px;
  display:flex;
  align-items: center;
}
.colorButton{
  background-color: rosybrown;
}

.box-one{
  display: flex;
  margin-bottom: 20px;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>